<template>
    <div class="">
        <div class="flex items-center justify-between p-4">
            <div class="flex items-center">
                <div class="text-lg font-bold">热销榜</div>
                <div class="ml-4 text-sm text-gray-500 ">每日正点更新</div>
            </div>
            <div>
                <IIcon-park-outline:more class="text-gray-700" />
            </div>
        </div>
        <div>
            <div class="px-4 space-x-4 overflow-x-auto text-sm whitespace-nowrap">
                <RouterLink class="inline-block goods" v-for="(item, i) in goods" :to="{
                    name: 'goods', params: { id: i }
                }">
                    <div class="space-y-1">
                        <div class="bg-slate-50">
                            <img :src="item.src" class="object-cover w-24 mx-auto" />
                        </div>
                        <div class="w-24 text-gray-700 line-clamp-1 ">{{ i }} {{ item.name }}</div>
                        <div class="text-center bg-[#fef7ee] rounded-lg text-xs py-px my-1  text-gray-500">热销 3.2w 件</div>
                        <div class="text-lg text-red-600">¥{{ item.price }}</div>
                    </div>
                </RouterLink>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import g1 from '~/assets/shop/goods/g1.png'
import g2 from '~/assets/shop/goods/g2.png'
import g3 from '~/assets/shop/goods/g3.png'

const goods = [
    { name: '加拿大进口猫粮加拿大进口猫粮加拿大进口猫粮', src: g1, price: '398.00', originPrice: '599.00' },
    { name: '新西兰进口新西兰进口新西兰进口', src: g2, price: '398.00', originPrice: '599.00' },
    { name: '素力高全猫粮素力高全猫粮素力高全猫粮', src: g3, price: '398.00', originPrice: '599.00' },
    { name: '加拿大进口猫粮加拿大进口猫粮加拿大进口猫粮', src: g1, price: '398.00', originPrice: '599.00' },
    { name: '新西兰进口新西兰进口新西兰进口', src: g2, price: '398.00', originPrice: '599.00' },
    { name: '素力高全猫粮素力高全猫粮素力高全猫粮', src: g3, price: '398.00', originPrice: '599.00' },
]
</script>
    
<style lang="scss" scoped>
.goods {
    @apply inline-block space-y-1 overflow-hidden text-center relative rounded-lg;

    &:nth-child(n):after {
        @apply absolute top-0 left-0 text-white w-5 italic h-5 grid place-content-center rounded-br-lg
    }

    &:nth-child(1):after {
        content: '1';
        @apply bg-red-500
    }

    &:nth-child(2):after {
        content: '2';
        @apply bg-yellow-500
    }

    &:nth-child(3):after {
        content: '3';
        @apply bg-blue-500
    }
}</style>